<template>
	<div class="wrapper">
		<!-- <div class="switchTitle">
   <Button @click="add = true" type="primary">新建</Button>   
  
		</div>-->
	
		<div class="mainContent">
			<Split v-model="split" min="0px">
				<div
					slot="left"
					ref="leftSplit"
					class="split-atrr"
					@mousemove="scrollHeightChange(1)"
					@mouseout="scrollHeightChange(2)"
				>
					<Scroll ref="ivScroll" :height="scrollHeight" class="ivScrolla">
						<design-tree
							ref="contentScroll"
							:data="treeData"
							@getSelect="selectChange"
							@search="searchInfo"
              @getColor="selectColor"
						></design-tree>
					</Scroll>
				</div>
				<div slot="right" class="split-atrr">
					<div class="mainContentRight">
						<ui-design-content
							ref="designContent"
							@designChange="designChange"
							:pages-id="pagesId"
						></ui-design-content>
						<!-- <design-tree :data="treeData"></design-tree>  -->
					</div>
				</div>
			</Split>
		</div>
	</div>
</template>

<script>
import uiDesignContent from './ui-design-content.vue'
import designTree from '@/views/ui/components/tree/Tree.vue'
import { getOrganize, getSearch, graphicsPageAdd } from '@/api/uiDesign.js'
export default {
	name: 'ui-design',
	components: { uiDesignContent, designTree },
	props: {},
	data() {
		return {
			treeData: [],
			pagesId: null,
			split: '200px',
			scrollHeight: '100%',
			scrollMain: true,
		}
	},
	watch: {
		treeData: {
			handler(newName, oldName) {
				console.log(newName)
				this.setSession('getOrganize', newName)
			},
			deep: true,
		},
	},
	computed: {},
	methods: {
		init() {
			if (this.getSession('getOrganize')) {
				let that = this
				this.$nextTick(function () {
          that.treeData = JSON.parse(that.getSession('getOrganize'))
          	that.getColor(that.treeData )
				})
			} else {
				this.getOrganize(0)
      }
    },
    selectColor(val){
         this.setColor(this.treeData,val.id) 
    },
    		setColor(datas,id) {
      //遍历树
			for (let i in datas) {
    
        if(datas[i].id==id){
                datas[i].designColor= true;
        }	else{
           datas[i].designColor= false;
        }		  
				if (datas[i].children) {
					this.setColor(datas[i].children,id)
				} 
			}
    },
    		getColor(datas) {
      //遍历树
			for (let i in datas) {
    
        if(datas[i].designColor== true){
          this.$refs.designContent.num=0;
                this.pagesId=datas[i].id
        }	  
				if (datas[i].children) {
					this.getColor(datas[i].children)
				} 
			}
		},
		async getSearch(title) {
			//搜素
			let res = await getSearch({ title: title })
			let treeData = []
			if (res.code == 200) {
				if (res.result.length > 0) {
					for (let i = 0; i < res.result.length; i++) {
						treeData.push({
							open: false,
              name: res.result[i].title,
              designColor:false,
							level: 0,
							checked: false,
							...res.result[i],
						})
					}
					this.treeData = treeData
				} else {
					this.treeData = []
				}
			} else {
				this.$Message.error('请求失败!')
			}
		},
		async getOrganize(id, level = 0) {
			//组织机构
			let res = await getOrganize(id)
			if (id == 0) {
				let treeData = []
				let arr = []
				if (res.code == 200) {
					if (res.result.length > 0) {
						for (let i = 0; i < res.result.length; i++) {
							treeData.push({
								open: false,
								name: res.result[i].title,
                level: level,
                designColor:i == 0 ? true : false,
								checked: i == 0 ? true : false,
								...res.result[i],
							}) //i=0 默认值
						}
						this.treeData = treeData
						this.$refs.designContent.designColorLi = null
            this.$refs.designContent.pagesContent = {}
            this.pagesId=this.treeData[0].id//默认值
					} else {
						this.treeData = []
					}
				} else {
					this.$Message.error('请求失败!')
				}
			} else {
				let treeData = []
				if (res.code == 200) {
					if (res.result.length > 0) {
						for (let i = 0; i < res.result.length; i++) {
							treeData.push({
								open: false,
                name: res.result[i].title,
                designColor:false,
								level: level,
								checked: false,
								...res.result[i],
							})
						}
						this.setTree(this.treeData, id, treeData)
						this.$refs.designContent.designColorLi = null
						this.$refs.designContent.pagesContent = {}
						console.log(this.treeData)
					} else {
						this.setTree(this.treeData, id, treeData)
					}
				} else {
					this.$Message.error('请求失败!')
				}
			}
			this.setSession('getOrganize', this.treeData)
		},
		setTree(datas, id, data, sum = []) {
			//遍历树  获取id数组
			let a = []
			for (var i in datas) {
				if (datas[i].id == id) {
					datas[i].children = data
					a = JSON.parse(JSON.stringify(this.treeData))
					this.treeData = []
					this.treeData = a
				}
				if (datas[i].children) {
					this.setTree(datas[i].children, id, data)
				} else {
				}
			}
		},
		selectChange(val) {
			//树点击事件 返回值
			this.pagesId = val.id
			this.getOrganize(val.id, val.level + 1)
		},
		searchInfo(val) {
			//搜索返回值
			if ((val == null) | (val == '') | (val == undefined)) {
				this.getOrganize(0)
			} else {
				this.getSearch(val)
			}
		},
		designChange(val) {
			//返回当前项 和index
			//  val= {data:item,num:index}
		
			//val.item获取必要信息进行进一步操作
		},
		scrollHeightChange(val) {
			//滚动条 出现 收起
			if (val == 1) {
				if (
					this.$refs.leftSplit.clientHeight >
					this.$refs.contentScroll.$el.clientHeight
				)
					return //如果没有超出  滚动条不显示
				this.scrollMain = false
			} else if (val == 2) {
				this.scrollMain = true
			}
		},
	},
	created() {},
	mounted() {
		this.init()
		this.scrollHeight = this.$refs.leftSplit.clientHeight
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	background: white;
	padding: 16px;
}
.switchTitle {
	height: 50px;
}
.mainContent {
	border: 1px solid rgba(220, 222, 226, 1);
	width: 100%;
	height: 100%;
}
.mainContentRight {
	width: 100%;
	height: 100%;
	position: relative;
}

.split-atrr {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
// scroll 变化切换 class
&/deep/ .ivu-scroll-container {
	overflow-x: hidden;
}
&/deep/ .scrollMain .ivu-scroll-container {
	overflow-y: hidden;
}
.ivScrolla ::-webkit-scrollbar {
	display: none;
}
&/deep/ .ivScrolla .ivu-scroll-loader {
	padding: 0px;
	height: 0;
	line-height: 0;
}
</style>